<script lang="ts" setup>
import { useDevice } from '@/stores'
import { usePx } from '@/utils'
import { isEmpty } from 'lodash-es'
import { computed } from 'vue'

withDefaults(defineProps<{
  title?: string
  transparent?: boolean
}>(), {
  // title: undefined,
  transparent: true,
})

const device = useDevice()
const height = computed(() => device.menuButtonStyle.bottom + usePx(10))
</script>

<template>
  <view class="">
    <view
      class="fixed top-0 z-9 w-full duration-300" :style="{
        height: `${height}px`,
        paddingTop: `${device.menuButtonStyle.top}px`,
        backgroundColor: transparent ? 'transparent ' : 'white',
      }"
    >
      <view
        class="flex items-center pl-30px" :style="{
          height: `${device.menuButtonStyle.height}px`,
        }"
      >
        <view v-if="!isEmpty(title)" class="text-40px text-#3">{{ title }}</view>
        <slot></slot>
      </view>
    </view>
    <view class="" :style="{ height: `${height}px` }"></view>
  </view>
</template>

<style lang="less" scoped></style>
